Drilldown এবং Data Exploration হল ডেটা ভিজুয়ালাইজেশনের প্রক্রিয়া যা ব্যবহারকারীদের অনুমতি দেয় যাতে তারা একটি সমষ্টিগত বা সার্বিক চিত্র থেকে আরও বিস্তারিত ডেটাতে প্রবেশ করতে পারে। Google Charts-এ এই দুটি কাস্টমাইজেশন ফিচার ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারেন, যেখানে ব্যবহারকারীরা চার্টের উপাদানগুলির উপর ক্লিক করে আরও গভীরে বিশ্লেষণ করতে পারে।

Drilldown (ড্রিলডাউন)

Drilldown হল একটি প্রক্রিয়া যার মাধ্যমে আপনি একটি চার্ট বা গ্রাফ থেকে আরো বিস্তারিত স্তরে ডেটাতে প্রবেশ করতে পারেন। উদাহরণস্বরূপ, একটি সার্বিক পাই চার্টে ক্লিক করার পর আপনি সেই বিভাগ বা সেগমেন্টের ভিতরে আরও বিস্তারিত তথ্য দেখতে পাবেন। এটি মূলত বড় ডেটা সেটগুলিকে ছোট অংশে বিভক্ত করে।

Drilldown এর উদাহরণ:

ধরা যাক, আমাদের একটি Pie Chart আছে যেখানে সাধারণ কিছু তথ্য প্রদর্শিত হচ্ছে এবং ব্যবহারকারী একটি সেগমেন্টে ক্লিক করলে আমরা ড্রিলডাউন তথ্য প্রদর্শন করব। এটি করতে, Google Charts API-তে selection ইভেন্ট ব্যবহার করা হয়।

Step-by-Step Example:

1. Initial Chart (পাই চার্ট): প্রথমে একটি সাধারণ পাই চার্ট তৈরি করা হবে, যা কিছু বিভাগকে দেখাবে (যেমন 'Work', 'Eat', 'Commute', 'Sleep' ইত্যাদি)।
2. Drilldown Data (ড্রিলডাউন ডেটা): যখন ব্যবহারকারী একটি সেগমেন্টে ক্লিক করবে, তখন নতুন ডেটা (যেমন 'Work' এর মধ্যে কোন টাস্ক রয়েছে) প্রদর্শিত হবে।

app.component.ts (কম্পোনেন্ট ফাইল):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Drilldown Example with Google Charts';

  chartType = 'PieChart';  // Chart Type
  chartData = [
    ['Category', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    width: 600,
    height: 400,
    is3D: true
  };

  drilldownData = {
    'Work': [
      ['Task', 'Hours'],
      ['Emails', 2],
      ['Meetings', 3],
      ['Coding', 3]
    ],
    'Eat': [
      ['Meal', 'Hours'],
      ['Breakfast', 1],
      ['Lunch', 1],
      ['Dinner', 1]
    ]
  };

  // Handle chart selection (drilldown action)
  handleChartSelection(event) {
    const selectedItem = event.selectedItem;
    if (selectedItem) {
      const category = this.chartData[selectedItem.row][0]; // Get the category name
      const drilldownChartData = this.drilldownData[category];

      // Update chart data with drilldown information
      this.chartData = drilldownChartData;
      this.chartOptions.title = `${category} Details`;  // Change title
    }
  }
}

app.component.html (HTML ফাইল):

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions" 
  (chartSelection)="handleChartSelection($event)">
</google-chart>

এখানে, আমরা (chartSelection) ইভেন্ট ব্যবহার করে সিলেক্ট করা সেগমেন্ট থেকে ডেটা সংগ্রহ করছি এবং এটি অনুযায়ী ড্রিলডাউন ডেটা সেট করছি। যখন ব্যবহারকারী পাই চার্টে ক্লিক করবে, তখন আমরা সেই সেগমেন্টের ড্রিলডাউন ডেটা দেখাব।

Data Exploration (ডেটা এক্সপ্লোরেশন)

Data Exploration হল ডেটার গভীরে প্রবেশ করা এবং ব্যবহারকারীদের বিভিন্ন দৃষ্টিকোণ থেকে ডেটা বিশ্লেষণ করতে দেওয়ার প্রক্রিয়া। এটি একাধিক ডেটা পয়েন্ট বিশ্লেষণ করে এবং স্বতঃস্ফূর্তভাবে নতুন উপসংহার তৈরি করার জন্য সাহায্য করে। Google Charts API-তে Data Exploration ইন্টারঅ্যাকটিভ চার্টের মাধ্যমে ডেটার ভিন্ন ভিন্ন দিক এবং অংশ খুঁজে বের করার প্রক্রিয়া।

Data Exploration এর উদাহরণ:

ধরা যাক, আমরা একটি Column Chart তৈরি করছি যেখানে সময়ের সাথে বিক্রির (sales) ডেটা দেখানো হচ্ছে। ব্যবহারকারী বিভিন্ন বছরের বিক্রি বিশ্লেষণ করতে পারেন এবং একটি নির্দিষ্ট বছরের ডেটা ক্লিক করার মাধ্যমে আরও বিশদ ডেটা দেখতে পারবেন।

app.component.ts (কম্পোনেন্ট ফাইল):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Data Exploration with Google Charts';

  chartType = 'ColumnChart';  // Chart Type
  chartData = [
    ['Year', 'Sales'],
    ['2018', 1000],
    ['2019', 1170],
    ['2020', 660],
    ['2021', 1030]
  ]; // Chart Data

  chartOptions = {
    title: 'Sales over the Years',
    hAxis: { title: 'Year' },
    vAxis: { title: 'Sales' },
    width: 600,
    height: 400
  };

  drilldownData = {
    '2018': [
      ['Product', 'Sales'],
      ['Product A', 500],
      ['Product B', 300],
      ['Product C', 200]
    ],
    '2019': [
      ['Product', 'Sales'],
      ['Product A', 700],
      ['Product B', 250],
      ['Product C', 220]
    ],
    '2020': [
      ['Product', 'Sales'],
      ['Product A', 300],
      ['Product B', 200],
      ['Product C', 160]
    ],
    '2021': [
      ['Product', 'Sales'],
      ['Product A', 400],
      ['Product B', 300],
      ['Product C', 330]
    ]
  };

  // Handle chart selection (exploring data for specific year)
  handleChartSelection(event) {
    const selectedItem = event.selectedItem;
    if (selectedItem) {
      const selectedYear = this.chartData[selectedItem.row][0]; // Get the selected year
      const detailedData = this.drilldownData[selectedYear];

      // Update chart data with more detailed information
      this.chartData = detailedData;
      this.chartOptions.title = `Sales for ${selectedYear}`; // Change title
    }
  }
}

app.component.html (HTML ফাইল):

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions" 
  (chartSelection)="handleChartSelection($event)">
</google-chart>

এখানে, আমরা (chartSelection) ইভেন্ট ব্যবহার করে সিলেক্ট করা বছর থেকে ডেটা সংগ্রহ করছি এবং সেটি অনুযায়ী বিশদ ডেটা (ড্রিলডাউন ডেটা) দেখাচ্ছি।

Conclusion

Drilldown এবং Data Exploration হল শক্তিশালী ফিচার যা Google Charts API-তে ডেটার গভীরে প্রবেশ এবং বিশ্লেষণ করতে সহায়তা করে। Drilldown ব্যবহার করে আপনি একটি সেগমেন্টে ক্লিক করে তার বিশদ তথ্য দেখতে পারেন, এবং Data Exploration ব্যবহার করে আপনি একটি চার্টে প্রদর্শিত ডেটার ওপর বিশ্লেষণ ও অন্যান্য ভিউ নিতে পারেন। এই ফিচারগুলি আপনাকে আপনার ডেটা ভিজুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করতে সহায়তা করে।

Drilldown Chart এমন একটি চার্ট যা ব্যবহারকারীকে মূল ডেটা থেকে বিস্তারিত স্তরে প্রবেশের অনুমতি দেয়। এটি ব্যবহারকারীকে প্রথমে একটি সারাংশ দেখাতে পারে এবং তারপর একটি নির্দিষ্ট ডেটা পয়েন্টে ক্লিক করলে আরও বিস্তারিত তথ্য বা স্তর খুলে দেখাতে পারে। সাধারণত Pie Charts, Bar Charts, Column Charts, Treemaps ইত্যাদিতে Drilldown ব্যবহার করা হয়।

Google Charts API-এ Drilldown ফিচার ব্যবহার করার জন্য Data Hierarchy ব্যবহার করে ডেটার বিভিন্ন স্তর তৈরি করা হয় এবং সেই স্তরের মধ্যে ইন্টারঅ্যাকশন পরিচালনা করা যায়।

এখানে, আমরা একটি Drilldown Chart তৈরি করার প্রক্রিয়া এবং ডেটা হায়ারার্কি ব্যবস্থাপনা দেখাবো।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new drilldown-chart-app
cd drilldown-chart-app

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts লাইব্রেরি ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এটি ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, Angular অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করতে, app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Drilldown Chart তৈরি করা

এখন আমরা একটি Drilldown Chart তৈরি করব যেখানে প্রথমে একটি পি চার্ট প্রদর্শিত হবে এবং ইউজার একটি সেগমেন্টে ক্লিক করলে বিস্তারিত তথ্য দেখানো হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Drilldown Chart Example';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Category', 'Amount'],
    ['Food', 100],
    ['Clothing', 150],
    ['Transportation', 200]
  ]; // Initial Data for Pie Chart

  chartOptions = {
    title: 'Expenses Breakdown',
    width: 600,
    height: 400
  };

  // Drilldown Data (when clicked on a category)
  drilldownData = {
    'Food': [
      ['Subcategory', 'Amount'],
      ['Fruits', 30],
      ['Vegetables', 40],
      ['Snacks', 30]
    ],
    'Clothing': [
      ['Subcategory', 'Amount'],
      ['Shirts', 80],
      ['Jeans', 70],
      ['Shoes', 0]
    ],
    'Transportation': [
      ['Subcategory', 'Amount'],
      ['Fuel', 100],
      ['Bus', 50],
      ['Taxi', 50]
    ]
  };

  // Function to handle Drilldown
  drilldown(category: string) {
    this.chartData = this.drilldownData[category];
    this.chartOptions = {
      title: `${category} Breakdown`,
      width: 600,
      height: 400
    };
  }
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart Component -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions" 
  (click)="drilldown($event)">
</google-chart>

Chart Explanation:

• Main Data (Initial Pie Chart): এই ডেটা chartData অ্যারেতে রয়েছে, যা চারটি প্রধান ক্যাটেগরির তথ্য দেখায়। ইউজার একটি সেগমেন্টে ক্লিক করলে, সেই ক্যাটেগরির বিস্তারিত তথ্য drilldownData থেকে পাওয়া যাবে।
• Drilldown Data: Food, Clothing, এবং Transportation ক্যাটেগরি সবগুলো এক্সপ্যান্ডেড ডেটা (subcategories) ধারণ করে।
• drilldown() Function: ইউজার যখন কোন ক্যাটেগরিতে ক্লিক করবে, তখন এটি drilldownData থেকে উপযুক্ত ডেটা নিয়ে এসে চার্টে আপডেট করবে।

Step 5: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Drilldown Chart দেখতে পাবেন এবং যখন আপনি কোন সেগমেন্টে ক্লিক করবেন তখন সেই ক্যাটেগরির বিস্তারিত ডেটা প্রদর্শিত হবে।

Data Hierarchy এবং Drilldown

Data Hierarchy ব্যবস্থাপনা করে আপনি সহজেই বিভিন্ন স্তরের ডেটা প্রদর্শন করতে পারেন। এতে আপনি প্রথমে মূল ডেটা দেখাতে পারেন এবং তারপর ব্যবহারকারী কোনো অংশে ক্লিক করার মাধ্যমে আরও বিস্তারিত ডেটা উপস্থাপন করতে পারেন। Drilldown ফিচার Pie Chart, Bar Chart, Column Chart, Tree Maps ইত্যাদিতে কার্যকরী হতে পারে।

Drilldown Data Structure

1. Main Data: প্রথমে একটি সাধারণ চার্ট প্রদর্শন করুন যা একটি সারাংশ দেখায়।
2. Subcategories/Details: ইউজার যখন একটি সেগমেন্টে ক্লিক করবে, তখন ঐ সেগমেন্টের বিস্তারিত ডেটা প্রদর্শন করুন।

Chart Customization for Drilldown

আপনি Drilldown চার্টের জন্য আরও কাস্টমাইজেশন করতে পারেন যেমন:

1. Animation: Drilldown চার্টের জন্য অ্যানিমেশন যোগ করা।
2. Colors: বিভিন্ন স্তরের জন্য বিভিন্ন রঙ সেট করা।
3. Data Labels: বিস্তারিত তথ্যের জন্য ডেটা লেবেল যোগ করা।

chartOptions = {
  title: `${category} Breakdown`,
  width: 600,
  height: 400,
  colors: ['#ffcc00', '#ff6600', '#ff3333'], // Colors for subcategories
  animation: {
    startup: true,
    easing: 'inAndOut',
    duration: 1000
  }
};

সারাংশ

Drilldown Chart একটি শক্তিশালী ফিচার যা ইউজারকে ডেটার সারাংশ থেকে বিস্তারিত স্তরে যাওয়ার সুযোগ দেয়। Google Charts API ব্যবহার করে Pie Chart, Bar Chart, Column Chart ইত্যাদিতে Drilldown ফিচার তৈরি করা যায় এবং Data Hierarchy ব্যবস্থাপনার মাধ্যমে আপনি স্তরভিত্তিক ডেটা উপস্থাপন করতে পারেন। Angular অ্যাপে Drilldown Chart তৈরি করতে আমরা event binding এবং chartData ব্যবহৃত করেছি, যার মাধ্যমে ইউজার ইন্টারঅ্যাকশন অনুযায়ী চার্টের ডেটা আপডেট হচ্ছে।

Data Exploration হচ্ছে ডেটার গভীরে প্রবেশ করা এবং বিভিন্ন দৃষ্টিকোণ থেকে সেটি বিশ্লেষণ করা। এটি ডেটা সাইন্সের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যেখানে ডেটা থেকে প্যাটার্ন, ট্রেন্ড, এবং সম্পর্ক বের করা হয়। Google Charts API ব্যবহার করে আপনি Data Exploration এর জন্য শক্তিশালী এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। এই প্রক্রিয়াতে আপনি সহজেই ডেটা ফিল্টার, জুম ইন, বা বিভিন্ন পর্যায়ে বিশ্লেষণ করতে পারেন।

এখানে আমরা বিভিন্ন Chart Types (যেমন: Bar Chart, Line Chart, Pie Chart, Scatter Chart) এবং Interactivity ফিচারের মাধ্যমে কিভাবে ডেটা এক্সপ্লোরেশন করা যায়, সেটি দেখাবো।

Step 1: Angular প্রজেক্ট তৈরি এবং Google Charts ইন্সটল করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন এবং Google Charts ইন্সটল করুন।

ng new data-exploration
cd data-exploration
npm install angular-google-charts

এটি ইন্সটল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 2: GoogleChartsModule ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করতে হবে।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Chart Data Exploration উদাহরণ তৈরি করা

এখন আমরা Data Exploration এর জন্য বিভিন্ন ধরনের চার্ট এবং ইন্টারঅ্যাকটিভ ফিচার তৈরি করব। আমরা উদাহরণস্বরূপ একটি Bar Chart, Pie Chart, এবং Scatter Chart তৈরি করব, যেখানে ইউজার ডেটা এক্সপ্লোর করতে পারবেন।

AppComponent (app.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Data Exploration Example';

  // Chart Types
  chartTypeBar = 'BarChart';
  chartTypePie = 'PieChart';
  chartTypeScatter = 'ScatterChart';

  // Data for different charts
  chartDataBar = [
    ['Category', 'Value'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  chartDataPie = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  chartDataScatter = [
    ['Time', 'Sales'],
    [1, 20],
    [2, 40],
    [3, 60],
    [4, 80],
    [5, 100]
  ];

  // Chart Options
  chartOptionsBar = {
    title: 'Work vs Leisure Time',
    hAxis: { title: 'Category' },
    vAxis: { title: 'Hours' },
    width: 600,
    height: 400
  };

  chartOptionsPie = {
    title: 'Daily Activities Distribution',
    pieHole: 0.4,
    width: 600,
    height: 400
  };

  chartOptionsScatter = {
    title: 'Sales Over Time',
    hAxis: { title: 'Time' },
    vAxis: { title: 'Sales' },
    width: 600,
    height: 400
  };

  // Interaction Methods
  onChartClick(event) {
    alert('You clicked on a chart point');
  }

  onChartSelection(event) {
    const selection = event.selection;
    if (selection.length > 0) {
      const selectedItem = selection[0];
      const rowIndex = selectedItem.row;
      alert(`You selected: ${this.chartDataBar[rowIndex][0]} with value: ${this.chartDataBar[rowIndex][1]}`);
    }
  }
}

Step 4: HTML ফাইলে Chart রেন্ডার করা এবং ইন্টারঅ্যাকশন যুক্ত করা

এখন, app.component.html ফাইলে আমরা Bar Chart, Pie Chart, এবং Scatter Chart রেন্ডার করব এবং তাদের ইন্টারঅ্যাকশন হ্যান্ডেল করব।

app.component.html:

<h1>{{ title }}</h1>

<!-- Bar Chart -->
<google-chart 
  [type]="chartTypeBar" 
  [data]="chartDataBar" 
  [options]="chartOptionsBar" 
  (chartClick)="onChartClick($event)">
</google-chart>

<!-- Pie Chart -->
<google-chart 
  [type]="chartTypePie" 
  [data]="chartDataPie" 
  [options]="chartOptionsPie">
</google-chart>

<!-- Scatter Chart -->
<google-chart 
  [type]="chartTypeScatter" 
  [data]="chartDataScatter" 
  [options]="chartOptionsScatter" 
  (chartSelection)="onChartSelection($event)">
</google-chart>

Step 5: Chart Interaction Handling

আমরা Chart Click এবং Chart Selection ইভেন্টগুলি হ্যান্ডেল করছি:

• Chart Click: ইউজার যখন চার্টের কোনো পয়েন্টে ক্লিক করবেন, তখন একটি বার্তা প্রদর্শিত হবে।
• Chart Selection: ইউজার যখন কোনো পয়েন্ট সিলেক্ট করবেন, তখন সিলেক্ট করা পয়েন্টের ডেটা প্রদর্শিত হবে।

Chart Interaction Event Handlers:

1. Chart Click: ক্লিক করার পর, ইউজারকে জানানো হবে যে তারা একটি পয়েন্টে ক্লিক করেছেন।
2. Chart Selection: সিলেক্ট করা পয়েন্টের তথ্য বের করে ইউজারকে দেখানো হবে।

Step 6: Real-Time Data Exploration

Real-Time Data Exploration এর জন্য আপনি setInterval বা WebSocket ব্যবহার করে ডেটা আপডেট করতে পারেন, যাতে চার্টের ডেটা ডায়নামিকভাবে পরিবর্তিত হয়। আমরা setInterval ব্যবহার করে কিছু ডেটা পরিবর্তন করে দেখাবো।

ngOnInit() {
  setInterval(() => {
    this.updateChartData();
  }, 5000);  // Update data every 5 seconds
}

updateChartData() {
  // Simulate data update by changing the values randomly
  this.chartDataBar = this.chartDataBar.map(item => {
    if (Array.isArray(item)) {
      return [item[0], Math.floor(Math.random() * 10) + 1];
    }
    return item;
  });
}

এখন, প্রতিটি 5 সেকেন্ড পর Bar Chart এর ডেটা আপডেট হবে এবং চার্টটি রিফ্রেশ হবে।

সারাংশ

Data Exploration এর জন্য Google Charts API এবং Angular ব্যবহার করে আপনি Scatter Plot, Pie Chart, Bar Chart, এবং Bubble Chart সহ বিভিন্ন চার্ট তৈরি করতে পারেন। ডেটা আপডেট এবং রিফ্রেশ করার জন্য আপনি Real-Time Data আপডেট এবং ইন্টারঅ্যাকটিভ ইভেন্ট (যেমন Chart Click এবং Chart Selection) ব্যবহার করে ইউজারের সাথে আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক যোগাযোগ তৈরি করতে পারেন।

এই প্রক্রিয়া আপনাকে ডেটা ভিজুয়ালাইজেশন ও এক্সপ্লোরেশন করতে এবং আরো বিস্তারিত তথ্য বের করতে সহায়তা করবে।

Parent এবং Child Data Visualization হল একটি কনসেপ্ট যেখানে আপনি একাধিক সম্পর্কিত ডেটা সেটের মধ্যে সম্পর্ক প্রদর্শন করতে চান। এটি প্রায়শই hierarchical (পদে পদে সম্পর্কিত) ডেটা উপস্থাপনা করতে ব্যবহৃত হয়, যেমন Parent-Child Relationship।

Google Charts API এবং Angular ব্যবহার করে, আপনি Parent এবং Child ডেটা সম্পর্কের ভিজুয়ালাইজেশন করতে পারেন। এখানে, আমরা TreeMap এবং Org Chart এর মত বিভিন্ন চার্ট ব্যবহার করে এই কনসেপ্টটি বুঝাবো।

1. TreeMap Chart (ট্রি ম্যাপ চার্ট)

TreeMap চার্ট একটি হায়ারার্কিকাল ডেটার ভিজুয়ালাইজেশন প্রকার, যেখানে আপনি প্যারেন্ট এবং চাইল্ড ডেটা হায়ারার্কির মাধ্যমে প্রদর্শন করতে পারেন। এতে প্যারেন্ট আইটেমগুলির জন্য বড় ব্লক এবং চাইল্ড আইটেমগুলির জন্য ছোট ব্লক ব্যবহৃত হয়।

TreeMap Chart উদাহরণ

ধরা যাক, আমরা একটি TreeMap Chart তৈরি করতে চাই, যেখানে একটি কোম্পানির বিভাগের মধ্যে কর্মী এবং তাদের পারফরম্যান্সের সম্পর্ক দেখানো হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Parent and Child Data Visualization';

  chartType = 'TreeMap'; // Chart Type: TreeMap

  chartData = [
    ['ID', 'Parent', 'Name', 'Value'],
    ['1', null, 'Company', 0],
    ['2', '1', 'Sales', 10],
    ['3', '1', 'Marketing', 5],
    ['4', '2', 'Inside Sales', 4],
    ['5', '2', 'Outside Sales', 6],
    ['6', '3', 'Digital Marketing', 4],
    ['7', '3', 'Traditional Marketing', 1]
  ];  // TreeMap Data: Parent and Child Relationship

  chartOptions = {
    title: 'Company Organizational Structure',
    minColor: '#f0f0f0',
    midColor: '#ffff00',
    maxColor: '#ff0000',
    headerColor: '#cccccc',
    fontColor: 'black',
    fontSize: 14,
    width: 600,
    height: 400
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart (TreeMap) -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে:

• Parent-Child Relationship: Company হলো প্যারেন্ট আইটেম এবং তার অধীনে Sales এবং Marketing শিশু বিভাগের তথ্য রয়েছে।
• Value: এখানে প্রতিটি বিভাগ এবং কর্মীর জন্য কিছু মূল্য নির্ধারণ করা হয়েছে, যা তাদের আকার বা গুরুত্ব নির্দেশ করে।

Chart Output:

এটি একটি TreeMap চার্ট তৈরি করবে যেখানে কোম্পানির বিভাগগুলি হায়ারার্কিক্যালভাবে প্রদর্শিত হবে এবং তাদের সম্পর্ক দেখা যাবে।

2. Org Chart (অর্গানাইজেশন চার্ট)

Org Chart একটি হায়ারার্কিকাল চার্ট যা প্রতিষ্ঠানের মধ্যে বিভিন্ন স্তরের সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষ করে Parent-Child Relationship দেখানোর জন্য আদর্শ।

Org Chart উদাহরণ

ধরা যাক, আমরা একটি কোম্পানির Org Chart তৈরি করতে চাই, যেখানে ম্যানেজারদের অধীনে তাদের টিম সদস্যদের সম্পর্ক দেখানো হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Company Org Chart';

  chartType = 'OrgChart';  // Chart Type: Org Chart

  chartData = [
    ['Name', 'Manager', 'ToolTip'],
    ['John', '', 'CEO'],
    ['Sarah', 'John', 'VP Sales'],
    ['Mike', 'Sarah', 'Sales Manager'],
    ['David', 'Sarah', 'Marketing Manager'],
    ['James', 'Mike', 'Sales Representative'],
    ['Paul', 'Mike', 'Sales Representative']
  ];  // Org Chart Data: Parent and Child Relationship

  chartOptions = {
    title: 'Company Organization Chart',
    width: 600,
    height: 400,
    allowHtml: true
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart (Org Chart) -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে:

• Parent-Child Relationship: John (CEO) হলো প্যারেন্ট, এবং তার অধীনে Sarah (VP Sales), Mike (Sales Manager), James এবং Paul (Sales Representatives) রয়েছেন।
• ToolTip: একটি tooltip তৈরি করা হয়েছে, যা মাউস হোভার করলে প্রতিটি পজিশনের নাম দেখাবে।

Chart Output:

এটি একটি Org Chart তৈরি করবে, যেখানে কোম্পানির ম্যানেজার এবং তাদের অধীনে কর্মীরা হায়ারার্কিক্যালভাবে প্রদর্শিত হবে।

3. Google Charts এ Parent-Child Data Visualization কাস্টমাইজেশন

আপনি TreeMap এবং OrgChart কাস্টমাইজ করতে পারেন যেভাবে আপনি চাইবেন, যেমন:

• Color Customization: আপনি বিভিন্ন প্যারেন্ট এবং চাইল্ড আইটেমের জন্য ভিন্ন রঙ ব্যবহার করতে পারেন।
• Size Customization: প্রতিটি আইটেমের সাইজ বা ভ্যালু কাস্টমাইজ করতে পারেন।
• Tooltip: প্যারেন্ট এবং চাইল্ড সম্পর্কের বিস্তারিত তথ্য দেখানোর জন্য টুলটিপ কাস্টমাইজ করতে পারেন।

Example of Customizing Colors and Tooltips

chartOptions = {
  title: 'Custom Org Chart',
  width: 600,
  height: 400,
  allowHtml: true,
  nodeClass: 'node-class',  // Custom CSS Class for nodes
  tooltip: { isHtml: true },  // Enable HTML tooltips
  chartArea: { width: '80%', height: '80%' },
  colors: ['#ff0000', '#00ff00', '#0000ff', '#ff9900']
};

এখানে:

• tooltip: HTML টুলটিপ সক্রিয় করা হয়েছে।
• colors: বিভিন্ন নোডের জন্য রঙ নির্ধারণ করা হয়েছে।

সারাংশ

Parent-Child Data Visualization হচ্ছে ডেটার মধ্যে হায়ারার্কিক্যাল সম্পর্ক প্রদর্শন করা। আপনি Google Charts API ব্যবহার করে সহজেই TreeMap এবং Org Chart তৈরি করতে পারেন, যা প্যারেন্ট এবং চাইল্ড ডেটার সম্পর্ক দেখাতে সহায়তা করে। এই চার্টগুলি দৃষ্টি আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ হওয়ায় ডেটা ভিজুয়ালাইজেশন আরো কার্যকরী হয়।

Drilldown এবং Drill-Up হল একটি ইন্টারঅ্যাকটিভ চার্ট বৈশিষ্ট্য যা ব্যবহারকারীদের বৃহত্তর বা সূক্ষ্ম স্তরের ডেটাতে প্রবেশ করার অনুমতি দেয়। Drilldown ব্যবহৃত হয় যখন ব্যবহারকারী চার্টের কোনো অংশে ক্লিক করে ডেটার আরও বিস্তারিত বা গভীর স্তরে প্রবেশ করেন, এবং Drill-Up ব্যবহৃত হয় যখন ব্যবহারকারী আবার পূর্ববর্তী স্তরে ফিরে আসেন। এই ইন্টারঅ্যাকশনগুলো সাধারণত pie charts, bar charts, বা hierarchical charts-এ ব্যবহৃত হয়।

Google Charts API এ Drilldown এবং Drill-Up ইভেন্ট হ্যান্ডলিং খুবই সহজ এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে ব্যবহৃত হয়। এখানে আমরা আলোচনা করব কিভাবে Angular অ্যাপ্লিকেশনগুলিতে Drilldown এবং Drill-Up ইভেন্ট হ্যান্ডল করা যায়।

Drilldown এবং Drill-Up এর জন্য Google Charts Configuration

এখানে আমরা একটি Pie Chart ব্যবহার করব যেখানে Drilldown এবং Drill-Up ফিচার ব্যবহার করা হবে। প্রথমে, আমাদের কিছু ডেটা তৈরি করতে হবে, তারপর আমরা ইউজারের ক্লিক ইভেন্ট ট্র্যাক করে Drilldown এবং Drill-Up কার্যকলাপ ইমপ্লিমেন্ট করব।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি Angular অ্যাপ তৈরি করুন (যদি না থাকে):

ng new google-charts-drilldown
cd google-charts-drilldown

Step 2: Angular Google Charts লাইব্রেরি ইন্সটল করা

এখন আমরা angular-google-charts লাইব্রেরি ইনস্টল করব যা Google Charts এর সাথে ইন্টিগ্রেশন করবে।

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // GoogleChartsModule ইমপোর্ট করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Drilldown এবং Drill-Up Event Handling

এখন, Drilldown এবং Drill-Up ফিচার হ্যান্ডল করার জন্য আমাদের app.component.ts এবং app.component.html ফাইলগুলো কনফিগার করতে হবে।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Drilldown and Drill-Up Example';

  chartType = 'PieChart'; // Chart Type
  chartData: any[] = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Initial Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4, // Doughnut Style
    width: 600,
    height: 400
  };

  // Drilldown Data
  drilldownData: any[] = [
    ['Sub-task', 'Hours per Day'],
    ['Emails', 2],
    ['Meetings', 3],
    ['Coding', 3]
  ];

  // Drilldown Function
  onDrilldown(event: any) {
    const selectedItem = event.chart.getSelection()[0];
    if (selectedItem) {
      // If 'Work' is clicked, show the drilldown data
      if (event.chart.getDataTable().getValue(selectedItem.row, 0) === 'Work') {
        this.chartData = this.drilldownData;
        this.chartOptions = {
          title: 'Work Details',
          pieHole: 0.4,
          width: 600,
          height: 400
        };
      }
    }
  }

  // Drill-Up Function
  onDrillUp() {
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', 8],
      ['Eat', 2],
      ['Commute', 2],
      ['Watch TV', 2],
      ['Sleep', 8]
    ];
    this.chartOptions = {
      title: 'My Daily Activities',
      pieHole: 0.4,
      width: 600,
      height: 400
    };
  }

  ngOnInit() {
    google.charts.load('current', { packages: ['corechart', 'pie'] });
    google.charts.setOnLoadCallback(this.drawChart.bind(this));
  }

  drawChart() {
    const data = google.visualization.arrayToDataTable(this.chartData);
    const chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'select', this.onDrilldown.bind(this)); // Add Drilldown Event

    chart.draw(data, this.chartOptions);
  }
}

Explanation:

• onDrilldown(event): এই ফাংশনটি তখনই কল হবে যখন ইউজার চার্টে ক্লিক করবে। এখানে আমরা চেক করছি যে ইউজার "Work" টাস্কে ক্লিক করেছে কিনা এবং সেই অনুযায়ী ডেটা পরিবর্তন করছি (Drilldown Data)।
• onDrillUp(): এই ফাংশনটি আবার ইউজারকে মূল ডেটা সেটে ফিরিয়ে নিয়ে আসে। এটি সাধারণত Drill-Up ইন্টারঅ্যাকশন হিসেবে কাজ করে।

Step 5: HTML ফাইল

এখন, আমাদের app.component.html ফাইলে চার্ট রেন্ডার এবং ড্রিলডাউন, ড্রিল-আপ বাটন যুক্ত করতে হবে।

app.component.html:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

<!-- Drill Up Button -->
<button (click)="onDrillUp()" style="margin-top: 20px;">Drill Up</button>

<!-- Chart Container -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Step 6: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি Drilldown এবং Drill-Up ফিচারগুলি পরীক্ষা করতে পারবেন। যখন আপনি Work টাস্কে ক্লিক করবেন, তখন ড্রিলডাউন ডেটা দেখাবে এবং "Drill Up" বাটন ক্লিক করলে মূল ডেটা ফিরে আসবে।

Drilldown এবং Drill-Up কাস্টমাইজেশন

আপনি Drilldown এবং Drill-Up ফিচারের ডেটা কাস্টমাইজ করতে পারেন:

• Drilldown Data: আপনি ড্রিলডাউন ডেটা ফাংশনে বিভিন্ন ভ্যালু বা ডেটা সেট প্রদান করতে পারেন।
• Chart Options: chartOptions ব্যবহার করে চার্টের স্টাইল এবং আকার পরিবর্তন করতে পারেন।

সারাংশ

Drilldown এবং Drill-Up ফিচারগুলি ব্যবহার করে আপনি Google Charts এর মধ্যে ইন্টারঅ্যাকটিভ ভিজুয়ালাইজেশন তৈরি করতে পারেন। Angular এর মাধ্যমে Drilldown ইভেন্ট হ্যান্ডলিং এবং Drill-Up ব্যবহারের মাধ্যমে ডেটাকে সহজে বিস্তারিত বা মূল স্তরে ফিরিয়ে আনতে পারেন। এটি ব্যবহারকারীদের জন্য আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সহায়ক।